<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<style type="text/css">
			.product{
				border: 1px solid #ddd;
			}
			.product:hover{
				border: 1px solid #f00;
			}
			/* 找同款找相似的区域 */
			.product-image{
				/* 定位遵循：父相对、子绝对、父做参考 */
				position: relative;
				/* 绝对定位 */
			}
			.product-image .find{
				background-color: rgba(255,0,0,0.85);
				overflow: hidden;
				text-align: center;
				position: absolute;
				left: 0;
				bottom: -35px;
				width:100%;
				line-height: 35px;
				transform: bottom 1s;
			}
/* 			.product-image:hover .find a{
			border-right:1px solid #fff ;
			}
			.product-image:hover .find{
				display: block;
				bottom: 0px;
			} */
			.product-image .find a{

				display:inline-block;
				width:50%;
				font-size: 16px;
				color:rgba(255,255,255,255);
				text-decoration: none;
			}
			.product-image .find a.same{
				float: left;
			}
			.product-image .find a.similar{
				float: right;
			}
			.product-image img{
				width:100%;
			}
			/* 产品价格区 */
			.product-content{
				padding: 5px 10px;
			}
			.product-content .price{
				font-size: 18px;
				color:#f00;
			}
			.product-content a{
				font-size: 18;
				color:#000000;
				text-decoration: none;
			}
			.product-content a:hover
			{
				color: #f00;
				text-decoration: underline;
			}
		</style>
		<script type="text/javascript">
			$(function(){
				$('.product-image img').mouseenter(function(){
					// console.log(this);
					$(this).parent().siblings('.find').show().css('bottom','0').children('a').css('border-right','1px solid #fff');
					// $(this).parent().siblings('.find').children('a').css('border-right','1px solid #fff');
					// $(this).parent().siblings('.find').css('bottom','0');
				});
				$('.product-image').mouseleave(function(){
					// console.log(this);
					$(this).children('.find').hide();
					// $('.product-image .find').show();
					// $(this).parent().siblings('.find').children('a').css('border-right','1px solid #fff');
					// $(this).parent().siblings('.find').css('bottom','0');
				});
			})
		</script>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-12 col-md-3 col-sm-6 border">
					<div class="product">
						<!-- 商品图片区 -->
						<div class="product-image">
							<a href="#"><img src="img/pic1.jpg" class="img-fluid" ></a>
							<!-- 找相似区 -->
							<div class="find" style="display: none;">
								<a href="#" class="same">找同款</a>
								<a href="#" class="similar">找相似</a>
							</div>
	 					</div>
						<!-- 商品介绍区 -->
						<div class="product-content">
							<div class="price">&yen;66.00元</div>
							<div class="title">
								<a href="#">小猪佩奇英文版绘本</a>
							</div>
						</div>
					</div>
				</div>
				<div class="col-12 col-md-3 col-sm-6 border">
					<div class="product">
						<!-- 商品图片区 -->
						<div class="product-image">
							<a href="#"><img src="img/pic2.jpg" class="img-fluid" ></a>
						<!-- 找相似区 -->
						<div class="find" style="display: none;>
							<a href="#" class="same">找同款</a>
							<a href="#" class="similar">找相似</a>
						</div>
						</div>
						<!-- 商品介绍区 -->
						<div class="product-content">
							<div class="price">&yen;66.00元</div>
							<div class="title">
								<a href="#">小猪佩奇英文版绘本</a>
							</div>
						</div>
					</div>
				</div>
				<div class="col-12 col-md-3 col-sm-6 border">
					<div class="product">
						<!-- 商品图片区 -->
						<div class="product-image">
							<a href="#"><img src="img/pic3.jpg" class="img-fluid"></a>
						<!-- 找相似区 -->
						<div class="find" style="display: none;>
							<a href="#" class="same">找同款</a>
							<a href="#" class="similar">找相似</a>
						</div>
						</div>
						<!-- 商品介绍区 -->
						<div class="product-content">
							<div class="price">￥66.00元</div>
							<div class="title">
								<a href="#">小猪佩奇英文版绘本</a>
							</div>
						</div>
					</div>
				</div>
				<div class="col-12 col-md-3 col-sm-6 border">
					<div class="product">
						<!-- 商品图片区 -->
						<div class="product-image">
							<a href="#"><img src="img/pic4.jpg" class="img-fluid" ></a>
						<!-- 找相似区 -->
						<div class="find" style="display: none;>
							<a href="#" class="same">找同款</a>
							<a href="#" class="similar">找相似</a>
						</div>
						</div>
						<!-- 商品介绍区 -->
						<div class="product-content">
							<div class="price">￥66.00元</div>
							<div class="title">
								<a href="#">小猪佩奇英文版绘本</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>